<template>
    <div class="m-edit-modal">
        <div class="header">
            新增问卷
        </div>
        <div class="m-content">
            <Form ref="myData" :label-width="100" style="width: 900px"
                  :inline="true">
                <FormItem label="标题:" prop="posts_title">
                    <Input type="text" v-model="formData.title" placeholder="请输入..." style="width: 800px"/>
                </FormItem>
                <FormItem label="副标题:" prop="posts_title">
                    <Input type="text" v-model="formData.fuTitle" placeholder="请输入..." style="width: 800px"/>
                </FormItem>
                <FormItem label="说明:" prop="desc">
                    <Input type="textarea" v-model="formData.remark" :autosize="{minRows: 2,maxRows: 5}"
                           placeholder="请输入..." style="width: 800px"></Input>
                </FormItem>
                <Row>
                    <Col span="12">
                        <FormItem prop="date" label="开始时间:">
                            <DatePicker v-model="formData.beginTime"  format="yyyy-MM-dd" type="date"
                                        placeholder="请选择"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem prop="date" label="结束时间:">
                            <DatePicker v-model="formData.endTime"  format="yyyy-MM-dd" type="date"
                                        placeholder="请选择"></DatePicker>
                        </FormItem>
                    </Col>
                </Row>
                <div style="display: flex;justify-content: space-between">
                    <FormItem>
                        <Button type="primary" @click="submit()" v-if="(type != 'query')">保存</Button>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="addModal" v-if="(type != 'query')">添加问题</Button>
                    </FormItem>
                </div>

                <Row>
                    <Col span="12">
                        <Table border :columns="columns1" :data="data1" width="880" style="margin-left:40px"></Table>
                    </Col>
                </Row>


            </Form>
        </div>
        <question-add :editStatus="editStatus" :paperId="paperId" :questionId="currentQuesId" v-on:closeModal="closeModal"></question-add>
    </div>
</template>
<script>
    import qs from 'qs'
    import API from '../../config/api'
    import {formatDateTime} from '../../config/utils'
    import QuestionAdd from '@/templates/onlineSurvey/question_add'

    export default {
        components: {
            QuestionAdd
        },
        data() {
            return {
                editStatus: false,
                startDate: new Date(),
                columns1: [
                    {
                        title: '序号',
                        key: 'id'
                    },
                    {
                        title: '题目',
                        key: 'title'
                    },
                    {
                        title: '是否必答',
                        key: 'direction',
                        render(h, params) {
                            let direction = params.row.direction;
                            if (direction == 'Y') {
                                return h('span', '是')
                            } else {
                                return h('span', '否')
                            }
                        }
                    },
                    {
                        title: '选项内容',
                        key: 'scontent',
                        render: (h,params) =>{
                            let content = params.row.scontent;
                            content = JSON.parse(content);
                            return h('span', this.formateContent(content))
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: "center",
                        render: (h, params) => {
                            return h("div", [
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "primary",
                                            size: "small",
                                            disabled: this.type == 'query' ? true : false
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.addModal(params.row.id)
                                            }
                                        }
                                    },
                                    "修改"
                                ),h(
                                    "Button",
                                    {
                                        props: {
                                            type: "primary",
                                            size: "small",
                                            disabled: this.type == 'query' ? true : false
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.removeQuestion(params.row.id)
                                            }
                                        }
                                    },
                                    "删除"
                                )
                            ])
                        }
                    }
                ],
                data1: [],
                paperId: '', //问卷id
                currentQuesId: '', //修改当前问题id
                type: '', //notify, query
                formData: {
                    title: '',
                    fuTitle: '',
                    remark: '',
                    beginTime: '',
                    endTime: ''
                }
            }
        },
        methods: {
            addModal(id) {
                if (typeof id === 'string' || typeof id === 'number'){
                    //修改问题
                    this.paperId = id;
                    this.getQuestionById(id)
                }else{
                    this.openAddModal()
                }
            },
            openAddModal(){
                if (this.paperId){
                    this.editStatus = true;
                    return;
                }else{
                    this.$Message.error('请先保存问卷');
                }
            },
            getQuestionById(id){
                this.editStatus = true;
                this.currentQuesId = id;
            },
            submit(){
                if (this.paperId){
                    //修改
                    this.notifySurvey()
                } else {
                    //添加
                    this.submitSurvey()
                }
            },
            notifySurvey(){
                if (!this.formData.title){
                    this.$Message.error('请输入问卷调查标题');
                    return;
                }
                if (!this.formData.beginTime){
                    this.$Message.error('请选择开始时间');
                    return;
                }
                if (!this.formData.endTime){
                    this.$Message.error('请选择结束时间');
                    return;
                }
                if (this.formData.endTime < this.formData.beginTime){
                    this.$Message.error('结束时间小于了开始时间');
                    return;
                }
                let formData = new FormData();
                formData.append('title', this.formData.title);
                formData.append('fuTitle', this.formData.fuTitle);
                formData.append('remark', this.formData.remark);
                formData.append('beginTime', this.formData.beginTime);
                formData.append('endTime', this.formData.endTime);
                formData.append('id', this.paperId);
                this.axios.post(API.PAPER_NOTIFY, formData).then(res => {
                    let data = res.data;
                    if (data.code == 200) {
                        this.$Message.info('修改成功');
                    } else {
                        this.$Message.info(data.msg)
                    }
                })
            },
            submitSurvey() {
                if (!this.formData.title){
                    this.$Message.error('请输入问卷调查标题');
                    return;
                }
                if (!this.formData.beginTime){
                    this.$Message.error('请选择开始时间');
                    return;
                }
                if (!this.formData.endTime){
                    this.$Message.error('请选择结束时间');
                    return;
                }
                if (this.formData.endTime < this.formData.beginTime){
                    this.$Message.error('结束时间小于了开始时间');
                    return;
                }
                let formData = new FormData();
                formData.append('title', this.formData.title);
                formData.append('fuTitle', this.formData.fuTitle);
                formData.append('remark', this.formData.remark);
                formData.append('beginTime', this.formData.beginTime);
                formData.append('endTime', this.formData.endTime);
                this.axios.post(API.PAPER_ADD, formData).then(res => {
                    let data = res.data;
                    if (data.code == 200) {
                        this.paperId = data.data;
                        this.$Message.info('保存成功');
                        // if (this.paperId) {
                        //     this.getQuestionList()
                        // }
                        // this.editStatus = true;
                    } else {
                        this.$Message.info(data.msg)
                    }
                })
            },
            closeModal() {
                this.editStatus = false;
                if (!this.paperId) {
                    return;
                }
                this.getQuestionList()
            },
            getQuestionList() {
                let data = {
                    paperId: this.paperId
                }
                this.axios.post(API.QUESTION_LIST, qs.stringify(data)).then(res => {
                    let netData = res.data;
                    if (netData.code == 200) {
                        this.data1 = netData.data.dataList;
                    }
                })
            },
            getSurveyInfo(){
                let data = {
                    id: this.paperId
                }
                this.axios.post(API.GET_SURVERY_INFO, qs.stringify(data)).then(res => {
                    let netData = res.data;
                    if (netData.code == 200) {
                        let data = netData.data;
                        this.formData.title = data.title;
                        this.formData.fuTitle = data.fuTitle;
                        this.formData.remark = data.remark;
                        this.formData.beginTime = data.beginTime;
                        this.formData.endTime = data.endTime
                    }
                })
            },
            handleSubmit(){
                if (!this.paperId){
                    this.$Message.info('请添加至少一个问题！');
                    return;
                }
                this.$router.back()
            },
            formateContent(content){
                let tempArr = [];
                for (let val in content){
                    tempArr.push(content[val].title + ":" + content[val].content);
                }
                 return tempArr.join(',');
            },
            removeQuestion(id){
                let data ={
                    id: id
                };
                this.axios.post(API.QUESTION_DELETE, qs.stringify(data)).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        this.getQuestionList();
                        this.$Message.info('删除问题成功')
                    }else {
                        this.$Message.info(data.msg)
                    }
                })
            }
        },
        computed: {},
        watch: {
            'formData.beginTime': function (newVal, oldVal) {
                this.formData.beginTime = formatDateTime(newVal);
            },
            'formData.endTime': function (newVal, oldVal) {
                this.formData.endTime = formatDateTime(newVal);
            }

        },
        created() {
            let id = this.$route.params.id;
            let type = this.$route.params.type;
            if (id && type){
                //修改或者查看
                this.paperId = id;
                this.type = type;
                this.getSurveyInfo();
                this.getQuestionList()
            }
        }
    }
</script>
<style lang='scss' scoped>
    .m-edit-modal {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 100;

        .header {
            background-color: #f8f8f9;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            padding-left: 25px;
            padding-right: 5px;
            color: #000;
            box-shadow: 1px 1px 1px rgba(220, 172, 172, .5);

            span {
                float: right;
                padding: 0 20px;
                cursor: pointer;
            }

        }

        .m-content {
            margin-top: 20px;
            padding-bottom: 100px;
            overflow-y: auto;
        }

        .list-header {
            height: 45px;
            color: #333;
            line-height: 45px;
        }

        .list-row {
            padding-left: 100px;
            font-size: 14px;
            line-height: 40px;
        }

    }
</style>
